<template>
  <div class="swiperadd">
        <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/swiper'}">轮播图列表</el-breadcrumb-item>
      <el-breadcrumb-item>新增轮播图</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="form"
      status-icon
    >
      <el-form-item label="轮播图链接" prop="link">
        <el-input v-model="ruleForm.link" />
      </el-form-item>
      <el-form-item label="轮播图提示" prop="alt">
        <el-input v-model="ruleForm.alt" />
      </el-form-item>
       <el-form-item label="图片地址" prop="img">
        <el-input v-model="ruleForm.img" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add(ruleFormRef)">
          新增轮播图
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {banneradd} from '@/api/index'
import {useRouter} from 'vue-router'
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
var $router=useRouter()
var ruleFormRef=ref()
var ruleForm=ref({img:'',link:'',alt:''})
var rules=ref({
  link: [{ required: true, message: '请输入轮播图链接', trigger: 'change' }],
  alt: [{ required: true, message: '请输入轮播图提示', trigger: 'change' }],
  img: [{ required: true, message: '请输入图片地址', trigger: 'change' }]
})
var add=()=>{
    ruleFormRef.value.validate(async(valid)=>{
        if(valid){
             var ok= await banneradd(ruleForm.value)
             console.log(ok);
             ElNotification({
                title:'轮播图新增',
                message:'新增成功',
                type:'success',
                duration: 1500,
        })   
            $router.back();
        }else{
               ElNotification({
                title:'轮播图新增',
                message:'新增失败',
                type:'error',
                duration: 1500
        })  
        }
       
    })
    
}
</script>

<style scoped lang='scss'>
.mianbao{
    margin-bottom: 20px;
}
.swiperadd{
    .form{
        margin: 20px 0;
        max-width: 600px;
    }
}
</style>